<template>
  <div class="device-tree">
    <SearchFilters @search="onSearch" />

    <!-- 只渲染当前页的根层（母设备） -->
    <DeviceNode
      v-for="item in pagedRoots"
      :key="item.id"
      :node="item"
    />

    <!-- 根层分页：只统计母设备数量 -->
    <div class="tree-pagination" v-if="totalRoots > pageSize">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper, sizes"
        :total="totalRoots"
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[5,10,20,50]"
        @current-change="noop"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { listSbtz } from '@/api/sbtz/sbtz'
import SearchFilters from './SearchFilters.vue'
import DeviceNode from './DeviceNode.vue'

/** 全量根层（母设备） */
const allRoots = ref([])
/** 分页状态（仅作用于根层母设备） */
const pageNum = ref(1)
const pageSize = ref(10)
const totalRoots = ref(0)
const loading = ref(false)
/** 最近一次搜索条件（翻页时沿用） */
const lastParams = ref({})

/** 当前页的母设备切片（子设备与备件保持完整） */
const pagedRoots = computed(() => {
  const start = (pageNum.value - 1) * pageSize.value
  const end = start + pageSize.value
  return allRoots.value.slice(start, end)
})

/** 加载整棵树（只做一次性构建，不对树分页） */
async function loadTree(params = {}) {
  loading.value = true
  lastParams.value = params
  const { rows = [] } = await listSbtz({
    ...params,
    // 这里给接口一个足够大的上限，确保能拿到完整树
    pageNum: 1,
    pageSize: 5000
  })

  // 过滤系统层
  const filtered = rows.filter(r => r.nodeType !== 'SYSTEM')

  // 构建父子结构
  const map = new Map()
  filtered.forEach(f => map.set(f.id, { ...f, children: [] }))

  const roots = []
  filtered.forEach(f => {
    const cur = map.get(f.id)
    if (!f.parentId || !map.has(f.parentId)) {
      roots.push(cur)           // 只有根层（母设备）进 roots
    } else {
      map.get(f.parentId).children.push(cur)
    }
  })

  // （可选）为每台设备挂上备件信息（你的模拟逻辑）
  roots.forEach(d => attachMockSpares(d))

  allRoots.value = roots
  totalRoots.value = roots.length

  // 翻页场景：若当前页超出范围，回退到最后一页
  const maxPage = Math.max(1, Math.ceil(totalRoots.value / pageSize.value))
  if (pageNum.value > maxPage) pageNum.value = maxPage

  loading.value = false
}

/** 递归为每个节点挂上模拟备件（不影响分页） */
function attachMockSpares(node) {
  node.spareInfos = [
    { id: node.id + '-s1', name: '传感器', code: 'SP001', stock: 8 },
    { id: node.id + '-s2', name: '电机', code: 'SP002', stock: 3 },
  ]
  if (node.children?.length) {
    node.children.forEach(attachMockSpares)
  }
}

/** 搜索：重置到第一页再加载 */
function onSearch(params) {
  pageNum.value = 1
  loadTree(params)
}

/** page-size 变化时，回到第 1 页更友好 */
function handleSizeChange() {
  pageNum.value = 1
}

/** 占位（v-model 已更新，无需额外动作） */
function noop() {}

onMounted(() => loadTree())
</script>

<style scoped>
.tree-pagination {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
</style>
